<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas系列</title>
    <style type="text/css">
        #canvas {
            background: #f5f5f5;
            width: 100%;
            height: 100%;
        }

        #btn1 {
            position: absolute;
            top: 10%;
            right: 20%;
        }

        #btn2 {
            position: absolute;
            top: 14%;
            right: 20%;
        }
    </style>
</head>
<body>


<canvas id="canvas"></canvas>


<div>
    <button id="btn1">
        点击加速
    </button>
    <button id="btn2">
        点击减速
    </button>
</div>

<script type="text/javascript">
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext('2d');
    const sW = 1;
    const lW = 4;
    const spacing = 10;
    for (let x = 0; x < canvas.width; x += spacing) {
        context.moveTo(x, 0);
        if (x % (spacing * 5) === 0) {
            context.lineTo(x, lW);
        } else {
            context.lineTo(x, sW);
        }
    }
    for (let y = 0; y < canvas.height; y += spacing) {
        context.moveTo(0, y);
        if (y % (spacing * 5) === 0) {
            context.lineTo(lW, y);
        } else {
            context.lineTo(sW, y);
        }
    }
    context.stroke();

    // 绘制坐标系
    function drawCoordinate() {
        context.beginPath();
        for (let x = 0; x < canvas.width; x += spacing) {
            context.moveTo(x, 0);
            if (x % (spacing * 5) === 0) {
                context.lineTo(x, lW);
            } else {
                context.lineTo(x, sW);
            }
        }
        for (let y = 0; y < canvas.height; y += spacing) {
            context.moveTo(0, y);
            if (y % (spacing * 5) === 0) {
                context.lineTo(lW, y);
            } else {
                context.lineTo(sW, y);
            }
        }
        context.strokeStyle = 'black';
        context.stroke();
    }


    // 其他代码


    let ballX = 0;
    let ballY = 0;
    // 小球的半径
    const ballRadius = 20;

    // 这里写角度看起来比较直观
    const angle = 45;
    let spend = 2;

    // 监听btn点击事件
    const btn1 = document.querySelector("#btn1");
    const btn2 = document.querySelector("#btn2");
    btn1.addEventListener("click", function () {
        spend += 0.4
    })
    btn2.addEventListener("click", function () {
        spend -= 0.4
        console.log("FFF")
    })

    // 更新小球
    function updateBall() {
        // 绘制的时候需要把角度转换为弧度
        const vx = Math.cos(angle * Math.PI / 180) * spend;
        const vy = Math.sin(angle * Math.PI / 180) * spend;
        ballX += vx;
        ballY += vy / 2;
        if (ballX > 240 + ballRadius) {
            ballX = -ballRadius;
            ballY = -ballRadius;
        }
    }

    const image = new Image();
    image.src = "./car.png";

    // 绘制小球
    function drawBall() {
        context.beginPath();
        context.drawImage(image, ballX, ballY, 48, 48)
        context.closePath();
        context.fillStyle = 'orange';
        context.fill();
    }

    function animate() {
        // 清屏
        context.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制坐标系
        drawCoordinate();

        // 更新小球位置
        updateBall();
        // 绘制球
        drawBall();

        // 递归调用
        requestAnimationFrame(animate);
    }

    // 启动动画
    requestAnimationFrame(animate);

</script>
</body>
</html>